<script setup>
import Demo from './components/Demo.vue'
//数据绑定
import Ref from './components/Ref.vue'
import Task01 from './components/task/task01.vue'
import ToRef from './components/ToRef.vue'
import ToRefs from './components/ToRefs.vue'
//指令
import VText from './components/VText.vue'
import VBind from './components/VBind.vue'
import Task02 from './components/task/task02.vue'
import VOn from './components/VOn.vue'
import VModel from './components/VModel.vue'
import VIf from './components/VIf.vue'
import VShow from './components/VShow.vue'
import VFor1 from './components/VFor1.vue'
import VFor2 from './components/VFor2.vue'
import Task03 from './components/task/task03.vue'
//事件对象
import EventObject from './components/EventObject.vue'
//事件修饰符
import Events from './components/Events.vue'
import Events02 from './components/Events02.vue'
//计算属性
import Computed from './components/Computed.vue'
import Watch from './components/Watch.vue'
//样式绑定
import BClass from './components/BClass.vue'
import BStyle from './components/BStyle.vue'
//API风格偏好
import OptionsAPI from './components/OptionsAPI.vue'
import CompositionAPI from './components/CompositionAPI.vue'
//局部组件
import ComponentA from './components/ComponentA.vue'
import ParentA from './components/ParentA.vue'

import ParentB from './components/ParentB.vue'
import ProvideGrand from './components/ProvideGrand.vue'
//动态组件
import Dynamic from './components/Dynamic.vue'
//插槽
import MySlot from './components/MySlot.vue'
import Task04 from './components/task/task04.vue'

//路由

</script>

<template>
	<h1>App组件</h1>
	<!-- 4.定义路由链接和路由视图 -->
	<!-- 4.1路由链接 -->
	<router-link to="/home">首页</router-link>
	<router-link to="/about">关于</router-link>
	
	<!-- 新增3个路由链接 -->
	
    <!-- 4.2 路由视图 -->
	<router-view></router-view>
	
	<!-- <Task04></Task04> -->
	<!-- <MySlot></MySlot> -->
	<!-- <Dynamic></Dynamic> -->
	<!-- <h2>根组件</h2> -->
	<!-- <ProvideGrand></ProvideGrand> -->
	<!-- <ParentB></ParentB> -->
	<!-- <div> -->
		<!-- 请向子组件ParentA传递变量msg="学习父组件向子组件传递数据" 并显示 -->
		<!-- <ParentA></ParentA> -->
	<!-- </div> -->
	<!-- <div>
	<GobalComponent></GobalComponent> -->
	<!-- 引用标签名可以用帕斯卡命名法命名 -->
	<!-- <ComponentA></ComponentA> -->
	<!-- 引用标签名可以用短横线分隔命名，可以多次引用组件 -->
	<!-- <component-a></component-a>
	</div> -->
	<!-- <CompositionAPI></CompositionAPI> -->
	<!-- <OptionsAPI></OptionsAPI> -->
	<!-- <BStyle></BStyle> -->
	<!-- <BClass></BClass> -->
	<!-- <Watch></Watch> -->
	<!-- <Computed></Computed> -->
	<!-- <Events02></Events02> -->
	<!-- <Events></Events> -->
	<!-- <EventObject></EventObject> -->
	<!-- <Task03></Task03> -->
	<!-- <VFor2></VFor2> -->
	<!-- <VFor1></VFor1> -->
	<!-- <VShow></VShow> -->
	<!-- <VIf></VIf> -->
	<!-- <VModel></VModel> -->
	<!-- <VOn></VOn> -->
	<!-- <Task02></Task02> -->
	<!-- <VBind></VBind> -->
	<!-- <VText></VText> -->
<!-- <ToRefs></ToRefs> -->
<!-- <ToRef></ToRef> -->
<!-- <Task01></Task01> -->
<!-- <Ref></Ref> -->
<!-- <Demo></Demo> -->
</template>

<style scoped>
   h2{
	   color: pink;
   }
   
   /* 深度选择器 */
   :deep(.newcolor){
	   color: blue;
   }
   
   a.router-active{
	   color: red;
	   text-decoration: none;
   }
   
</style>
